import React, {useState, useEffect} from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import { TabBar } from 'antd-mobile'
import style from './style.module.scss'
// 导入图标
import { AppOutline, GiftOutline, AppstoreOutline, UserSetOutline } from 'antd-mobile-icons'

export default function Footer() {
    const [active, setActive] = useState('/')
    const navigate = useNavigate()
    // 获取地址栏信息
    const location = useLocation()
    // 生命周期--执行一次,类似于componentDidMount钩子,但是挂载后只执行一次
    useEffect(() => {
        setActive(location.pathname)
    },[])
    // 切换tab
    function changeTab(key) {
        // 修改active变量
        setActive(key)
        // 跳转页面
        navigate(key)
    }
    return (
        <div className={style.footer}>
            <TabBar activeKey={active} onChange={changeTab}>
                <TabBar.Item key={'/'} title='首页' icon={<AppOutline />} />
                <TabBar.Item key={'/shop'} title='商城' icon={<GiftOutline />} />
                <TabBar.Item key={'/life'} title='生活服务' icon={<AppstoreOutline />} />
                <TabBar.Item key={'/about'} title='我的' icon={<UserSetOutline />} />
            </TabBar>
        </div>
    )
}
